<!DOCTYPE HTML>
<html>
<head>
  <meta charset='utf-8'>
  <title>Caret jQuery Plugin</title>
  <style>
  #doc_d{
    width: 100px;
    height: 10px;
    position: absolute;
    background: #000000;
    z-index: 999
  }
  #doc_t{
    position: absolute;
    left: 100px;
    top: 100px;
    width: 300px;
    height: 200px
  }
  #doc_t2{
    position: absolute;
    line-height: 1.8;
    left: 500px;
    top: 100px;
    width: 300px;
    height: 200px;
    padding:0;
    margin:0;
  }
  #doc_t3{
    position: absolute;
    left: 100px;
    top: 400px;
    width: 300px;
    height: 200px;
    font-size: 20px;
    padding:0;
    margin:0;
    overflow: scroll
  }
  </style>
</head>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/caret.js'></script>
<body>
<div id='doc_d'></div>
TEST-1
<textarea id='doc_t'>
主人叫 Master 僕人叫 Slave
Enemy 叫敵人 重量叫 Weight
我打開我的 裝備 世界 將會 
投入到你們的懷裡 你們別再 裝醉 
收拾你們的行李 現在 開始包 
那是英國人的鴉片 給我 開始燒 
船駛入了 舊金山港 開始撈
跟著我們 Jesus Walk 人氣 開始高
Soldier 是士兵 Tattoo 是刺青
我的 Brother 是兄弟 Family 是我至親
Money 叫錢 Honey 叫甜
到底言 和海水那一個 比較鹹
我問了 太多的人 For the same answer
從 Beat Boxer 到 Rock 到 Party Dancer
牆壁上 的 Graffiti's 還沒有 乾
我衣櫃裡 有太多名牌 還沒有 穿
</textarea>
<textarea id='doc_t2'>
主人叫 Master 僕人叫 Slave
Enemy 叫敵人 重量叫 Weight
我打開我的 裝備 世界 將會 
投入到你們的懷裡 你們別再 裝醉 
收拾你們的行李 現在 開始包 
那是英國人的鴉片 給我 開始燒 
船駛入了 舊金山港 開始撈
跟著我們 Jesus Walk 人氣 開始高
Soldier 是士兵 Tattoo 是刺青
我的 Brother 是兄弟 Family 是我至親
Money 叫錢 Honey 叫甜
到底言 和海水那一個 比較鹹
我問了 太多的人 For the same answer
從 Beat Boxer 到 Rock 到 Party Dancer
牆壁上 的 Graffiti's 還沒有 乾
我衣櫃裡 有太多名牌 還沒有 穿
</textarea>
<textarea id='doc_t3'>
主人叫 Master 僕人叫 Slave
Enemy 叫敵人 重量叫 Weight
我打開我的 裝備 世界 將會 
投入到你們的懷裡 你們別再 裝醉 
收拾你們的行李 現在 開始包 
那是英國人的鴉片 給我 開始燒 
船駛入了 舊金山港 開始撈
跟著我們 Jesus Walk 人氣 開始高
Soldier 是士兵 Tattoo 是刺青
我的 Brother 是兄弟 Family 是我至親
Money 叫錢 Honey 叫甜
到底言 和海水那一個 比較鹹
我問了 太多的人 For the same answer
從 Beat Boxer 到 Rock 到 Party Dancer
牆壁上 的 Graffiti's 還沒有 乾
我衣櫃裡 有太多名牌 還沒有 穿
</textarea>
<script>
$('#doc_t').caret({on: 'click', target: '#doc_d'});
$('#doc_t').caret({on: 'keyup', target: '#doc_d'});
$('#doc_t').caret({on: 'resize', target: '#doc_d'});
$('#doc_t').caret({on: 'scroll', target: '#doc_d'});
$('#doc_t2').caret({on: 'click', target: '#doc_d'});
$('#doc_t2').caret({on: 'keyup', target: '#doc_d'});
$('#doc_t2').caret({on: 'resize', target: '#doc_d'});
$('#doc_t2').caret({on: 'scroll', target: '#doc_d'});
$('#doc_t3').caret({on: 'click', target: '#doc_d'});
$('#doc_t3').caret({on: 'keyup', target: '#doc_d'});
$('#doc_t3').caret({on: 'resize', target: '#doc_d'});
$('#doc_t3').caret({on: 'scroll', target: '#doc_d'});
</script>
</body>
</html>


